import { PageContainer } from "@ant-design/pro-components";
import {
  Button,
  Modal,
  Input,
  Form,
  Tabs,
  Table,
  Select,
  Checkbox,
  Space,
  message,
  InputNumber,
} from "antd";
import { useState, forwardRef, useImperativeHandle, useRef } from "react";
import styles from "./styles.less";
const { TextArea } = Input;

export default forwardRef((props, ref) => {
  const [open, setOpen] = useState(false);
  const tableRef = useRef(null);
  const [form] = Form.useForm();

  const submitForm = async () => {
    await form.validateFields();
    console.log(form.getFieldsValue());
    setOpen(false);
    message.success("操作成功");
  };

  useImperativeHandle(ref, () => ({
    setOpen,
  }));

  return (
    <Modal
      open={open}
      title="员工工资设置"
      forceRender
      onCancel={() => setOpen(!open)}
      footer={
        <Space>
          <Button onClick={() => setOpen(false)}>取消</Button>
          <Button onClick={submitForm} type="primary">
            确定
          </Button>
        </Space>
      }
    >
      <Form form={form}>
        <Form.Item name="id" hidden>
          <Input />
        </Form.Item>
        <Form.Item label="所属场馆"> xx场馆 </Form.Item>
        <Form.Item label="员工名称"> 张三 </Form.Item>
        <h3>工资加项</h3>
        {[{ name: "xx1", title: "基本工资" }].map((item) => (
          <Form.Item
            label={item.title}
            name={item.name}
            rules={[{ required: true }]}
          >
            <InputNumber min={0} defaultValue={0} style={{ width: "100%" }} />
          </Form.Item>
        ))}
        <h3>工资减项</h3>
        {[{ name: "xx2", title: "五险一金" }].map((item) => (
          <Form.Item
            label={item.title}
            name={item.name}
            rules={[{ required: true }]}
          >
            <InputNumber
              min={0}
              defaultValue={0}
              prefix="￥"
              style={{ width: "100%" }}
            />
          </Form.Item>
        ))}
      </Form>
    </Modal>
  );
});

// export default Dom
